<script setup>
import {useItem} from "../../../store/index.js";
import {storeToRefs} from "pinia";
import {onBeforeMount, reactive, toRefs,ref} from "vue";
import {deleteTableRow} from "../../../utils/utils.js";
import {ElMessage} from "element-plus";
import String2List from "../String2List.vue";
import StringOrMumber from "../StringOrMumber.vue";
import Port from "./containers/Port.vue";
import HealthCheck from "./containers/HealthCheck.vue";
import Env from "./containers/Env.vue";
import VolumeMounts from "./containers/VolumeMounts.vue";

const {item} = storeToRefs(useItem())
const useItemer = useItem()
let editableTabsValue = ref(0)
const activeName =ref('basic')
const props = defineProps({
  containerType: {
    type: String,
    // 标准的容器叫container 初始化容器init
    default: 'container',
  }
})
// 存放当前有多个容器
const containerCount = ref(0)
const data = reactive({
  containers: [],
  container: {
    name: `${props.containerType}-${containerCount.value}`,
    image: "",
    tty: false,
    // 工作目录
    workingDir: '',
    imagePullPolicy: 'Always',

    resources: {
      limits:{
        memory: '1024Mi',
        cpu: 1,
      },
      Requests:{
        memory: '128Mi',
        cpu: '100m',
      },
    },
    ports:[],
    lifecycle: {},
    volumeMounts:[],
    env: [],
    envFrom: [],
  },
  options: {
    imagePullPolicy: [
      {
        label: "总是下载",
        value: "Always"
      },
      {
        label: "有了就不下载",
        value: "IfNotPresent"
      },
      {
        label: "从不下载",
        value: "Never"
      },
    ]
  }
})
onBeforeMount(()=>{
  if (props.containerType === 'init'){
      data.containers = useItemer.item.spec.template.spec.initContainers
  }else {
    data.containers = useItemer.item.spec.template.spec.containers
    containerCount.value = data.containers.length
    if (containerCount.value === 0){
          // data.containers.push(JSON.parse(JSON.stringify(data.container)))
        addTab()
    }
  }
})

// 删除容器
const removeTab= (targetName)=>{
    if(data.containers.length ===1 && props.containerType === 'container'){
      ElMessage.warning("至少有一个容器配置")
      return
    }

    if ( targetName=== editableTabsValue.value ){
        // 如果相等说明删除是当前的位置
      editableTabsValue.value = 0
    }else if(targetName < editableTabsValue.value ){
          editableTabsValue.value--
    }
    deleteTableRow(data.containers,targetName)

}
// 添加容器的方法
const addTab=()=>{
  // 先把容器的总数量加1
  containerCount.value++
  // 新容器的名字
  const  containerName=`${props.containerType}-${containerCount.value}`
  // 定义一个新容器
  const newContainer = JSON.parse(JSON.stringify(data.container))
  // 更新容器的名字
  newContainer.name = containerName
  // 添加容器到数组中
  data.containers.push(newContainer)
  editableTabsValue.value = data.containers.length-1
}

const rules =reactive({
    name: [
      {required: true,message: '请输入容器名称',trigger: 'blur'},
    ],
    image : [
      {required: true,message: '请输入镜像地址',trigger: 'blur'},
    ]
})

const {containers,options} = toRefs(data)
</script>

<template>
    <div style="display: flex;justify-content: flex-end">
      <el-button size="small" link type="primary" @click="addTab()">
        添加
      </el-button>
    </div>
    <el-tabs
        v-model="editableTabsValue"
        closable
        class="demo-tabs"
        @tab-remove="removeTab"
    >
      <el-tab-pane
          v-for="(item,index) in containers"
          :key="index"
          :label="item.name"
          :name="index"
      >
          <el-tabs  v-model="activeName" tab-position="left"  class="demo-tabs" >
            <el-tab-pane label="常用配置" name="basic">
              <!-- 容器的名字、终端、工作目录  -->
              <el-row :gutter="20">
                <!-- 名称 -->
                <el-col :span="12">
                  <!-- containers index -->
                  <!-- containers.index.name -->
                  <!-- containers.0.image -->
                  <el-form-item label="容器名称" :rules="rules.name" :prop="(props.containerType==='container'?'spec.template.spec.containers.'+index+'.name':'spec.template.spec.initContainers.'+index+'.name')" required>
                    <el-input  v-model.trim="item.name" placeholder="请输入容器名称"/>
                  </el-form-item>
                </el-col>
                <!-- 分配终端 -->
                <el-col :span="6">
                  <el-form-item label="分配终端" prop="item.tty">
                    <el-switch v-model="item.tty" />
                  </el-form-item>
                </el-col>
                <!-- 工作目录 -->
                <el-col :span="6">
                  <el-form-item label="工作目录" prop="item.workingDir" >
                    <el-input  v-model.trim="item.workingDir" placeholder="自定义工作目录"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 镜像地址、镜像下载策略 -->
              <el-row :gutter="20">
                <!-- 镜像地址 -->
                <el-col :span="18">
                  <el-form-item label="镜像地址" :rules="rules.image" :prop="(props.containerType==='container'?'spec.template.spec.containers.'+index+'.image':'spec.template.spec.initContainers.'+index+'.image')" required>
                    <el-input  v-model.trim="item.image" placeholder="请输入镜像地址"/>
                  </el-form-item>
                </el-col>
                <!-- 镜像下载策略 -->
                <el-col :span="6">
                  <el-form-item label="镜像下载策略" prop="item.imagePullPolicy">
                    <el-select v-model="item.imagePullPolicy" placeholder="镜像下载策略">
                      <el-option
                          v-for="s in options.imagePullPolicy"
                          :key="s.value"
                          :label="s.label"
                          :value="s.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            <!-- resources -->
              <el-row :gutter="20">
                <!-- 最小内存 -->
                <el-col :span="6" title="容器申请的最小内存，对应requests.memory">
                  <el-form-item label="最小内存" prop="item.resources.Requests.memory" >
                    <StringOrMumber input-width="140px" v-model:data="item.resources.Requests.memory" placeholder="内存最小请求量，可选"/>
                  </el-form-item>
                </el-col>
                <!-- 最大内存 -->
                <el-col :span="6" title="容器可用的最大内存，对应limits.memory">
                  <el-form-item label="最大内存" prop="item.resources.limits.memory" >
                    <StringOrMumber input-width="140px"  v-model:data="item.resources.limits.memory" placeholder="内存最大使用量，可选"/>
                  </el-form-item>
                </el-col>
                <!-- 最小cpu -->
                <el-col :span="6" title="容器可用的最小cpu，对应requests.cpu">
                  <el-form-item label="最小cpu" prop="item.resources.Requests.cpu" >
                    <StringOrMumber input-width="140px" v-model:data="item.resources.Requests.cpu" placeholder="cpu最小请求量，可选"/>
                  </el-form-item>
                </el-col>
                <!-- 最大cpu -->
                <el-col :span="6" title="容器可用的最大cpu，对应limits.cpu">
                  <el-form-item label="最大cpu" prop="item.resources.limits.cpu" >
                    <StringOrMumber input-width="140px" v-model:data="item.resources.limits.cpu"   placeholder="cpu最大使用量，可选"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 启动命令和命令参数 -->
              <el-row :gutter="20">
                <!-- 启动命令 -->
                <el-col :span="12">
                  <el-form-item label="启动命令" prop="item.command">
                    <String2List v-model:data="item.command" placeholder="自定义启动命令，对应Entrypoint" ></String2List>
                  </el-form-item>
                </el-col>
                <!-- 命令参数 -->
                <el-col :span="12">
                  <el-form-item label="命令参数" prop="item.args">
                    <String2List v-model:data="item.args" placeholder="自定义启动参数，对应Cmd" ></String2List>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="端口配置" name="ports">
              <Port
                :ports="item.ports"
              ></Port>
            </el-tab-pane>
            <el-tab-pane label="健康检查" name="health" style="height: 480px; overflow-y: auto">
              <HealthCheck :container="item" :container-index="index" :container-type="props.containerType"></HealthCheck>
            </el-tab-pane>
            <el-tab-pane label="环境变量" name="env">
              <env :env="item.env" :env-from="item.envFrom" ></env>
            </el-tab-pane>
            <el-tab-pane label="挂载存储" name="volume">
              <volume-mounts
                :volume-mounts="item.volumeMounts"
              ></volume-mounts>
            </el-tab-pane>
            <el-tab-pane label="生命周期" name="lifecycle">生命周期</el-tab-pane>
          </el-tabs>
      </el-tab-pane>
    </el-tabs>
</template>

<style scoped>

</style>